<!DOCTYPE html>
<!-- https://gallery.echartsjs.com/editor.html?c=xByg9OM4fg -->
<html style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"
    ></script>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"
    ></script>
    <script type="text/javascript">
      var data = [
        {
          value: 3661,
          name: '<10w'
        },
        {
          value: 5713,
          name: '10w-50w'
        },
        {
          value: 9938,
          name: '50w-100w'
        },
        {
          value: 17623,
          name: '100w-500w'
        },
        {
          value: 3299,
          name: '>500w'
        }
      ];
      var dom = document.getElementById('container');
      var myChart = echarts.init(dom);
      var app = {};
      option = null;
      option = {
        backgroundColor: '#fff',
        title: {
          text: '注册资金',
          subtext: '2016年',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: '0%',
          data: ['<10w', '10w-50w', '50w-100w', '100w-500w', '>500w']
        },
        series: [
          {
            type: 'pie',
            selectedMode: 'single',
            radius: ['25%', '58%'],
            color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],

            label: {
              normal: {
                position: 'inner',
                formatter: '{d}%',

                textStyle: {
                  color: '#fff',
                  fontWeight: 'bold',
                  fontSize: 14
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: data
          },
          {
            type: 'pie',
            radius: ['58%', '83%'],
            itemStyle: {
              normal: {
                color: '#F2F2F2'
              },
              emphasis: {
                color: '#ADADAD'
              }
            },
            label: {
              normal: {
                position: 'inner',
                formatter: '{c}家',
                textStyle: {
                  color: '#777777',
                  fontWeight: 'bold',
                  fontSize: 14
                }
              }
            },
            data: data
          }
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option, true);
      }
    </script>
  </body>
</html>
